<template>
  <h2>修改在setup中使用provide提供的值。demo16-provide-inject-demo07.vue</h2>
  <zhtt-card title="3s后更新变量值，子组件同步更新" footer="在setup中使用ref">
    location：{{location}}<br/>
    <demo16-provide-inject-demo07-children></demo16-provide-inject-demo07-children>
  </zhtt-card>
</template>

<script>
import {NumberUtils} from 'great-jsutils';
import { provide, reactive, ref } from 'vue';
import Demo16ProvideInjectDemo07Children from './demo16-provide-inject-demo07-children.vue';
export default {
  components: {
    Demo16ProvideInjectDemo07Children
  },
  setup() {
    const location = ref('North Pole');
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    });
    const updateLocation = () => {
      location.value = NumberUtils.randomInt({min:200})+'';
    }
    provide('location', location);
    provide('geolocation', geolocation);
    provide('updateLocation', updateLocation);
    return {
      location
    }
  }
}
</script>